<script lang="ts" setup>

//右边优秀公司列表
import {onMounted, reactive, ref} from "vue";
import {pageJobAndEmployerAPI} from "@/apis/job.ts";
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";


//中间岗位列表
const count = 8;
const pageCurrent = ref(1);
const pageTotal = ref(0);
const initLoading = ref(true);
const loading = ref(false);
const data = <any>reactive([]);
const list = <any>reactive([]);

const getJobList = async () => {
  const res = await pageJobAndEmployerAPI({
    pageCurrent: pageCurrent.value,
    pageSize: count,
    jobStatus:'正常招聘',
    jobAdminStatus:'正常'
  });
  if (res.data.flag) {
    pageTotal.value = res.data.data.total;
    data.push(...res.data.data.data)
    list.push(...res.data.data.data)
    initLoading.value = false;
  } else {
    message.error(res.data.message)
  }
}


onMounted(() => {
  getJobList();
});

const onLoadMore = () => {
  loading.value = true;
  initLoading.value = true;
  pageCurrent.value += 1;
  getJobList().then(() => {
    loading.value = false;
  });
};

//查看
const router = useRouter();
const goToJobAndEmployerDetail = (jobId: string) => {
  router.push({
    name: 'jobAndEmployerDetail',
    params: {
      jobId: jobId // 确保传递的参数为字符串类型
    }
  });
};

//计算颜色
const Color = (colorType: string) => {
  switch (colorType) {
    case '已认证':
      return 'green';
    case '未认证':
      return 'red';
  }
}

</script>

<template>
  <div class="main-title">
    <h4>推 荐 岗 位</h4>
  </div>
  <div class="main-content">
    <a-list
        :data-source="list"
        :loading="initLoading"
        class="demo-loadmore-list"
        item-layout="horizontal"
    >
      <template #loadMore>
        <div
            v-if="!initLoading && !loading && list.length < pageTotal"
            :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
        >
          <a-button @click="onLoadMore">获取更多</a-button>
        </div>
      </template>
      <template #renderItem="{ item }">

        <a-list-item>
          <template #actions>
            <a-button ghost type="primary" @click="goToJobAndEmployerDetail(item.jobId)">查看</a-button>
          </template>
          <a-skeleton :loading="!!item.loading" :title="false" active avatar>
            <a-list-item-meta
                :description="item.jobLocation+'&nbsp&nbsp&nbsp&nbsp'+item.jobSalary+'元/'+item.jobSalaryType"
            >
              <template #title>
                <a @click="goToJobAndEmployerDetail(item.jobId)">{{ item.jobTitle }}</a>
              </template>
              <template #avatar>
                <a-avatar
                    :size="54"
                    :src="'http://localhost:8080/image/download?name=' + item.userAvatarUrl"
                />
              </template>
            </a-list-item-meta>
            <a-badge-ribbon :text="item.employerIsVerified" :color="Color(item.employerIsVerified)">
              <div style="border-radius: 10px;width: 180px;background-color: #EAF2FF;padding: 10px">
                <div>
                  类型: {{ item.jobType }}
                </div>
                <div>
                  单位: {{ item.employerCompanyName }}
                </div>
              </div>
            </a-badge-ribbon>
          </a-skeleton>
        </a-list-item>
      </template>
    </a-list>
  </div>

</template>

<style scoped>
.main-title {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
  border-radius: 10px;
}

.main-content {
  width: 100%;
  flex-grow: 1;
  height: 100%;
  overflow: auto; /* 内容超出时自动显示滚动条 */
  padding: 10px;

}


</style>
